<template>
  <div class="applyManage-box">
    <div style="width: 100%; display: inline-block; ">
      <el-statistic :value="deadline" @finish="hilarity" time-indices>
        <template slot="suffix">
          后项目申请将被重置
        </template>
      </el-statistic>
    </div>
    <div class="apply-box">
        <table class="apply-box-table">
            <tr>
                <td>
                    项目名称
                </td>
                <td colspan="3px">
                    <el-input clearable prefix-icon="el-icon-s-home" maxlength="25" show-word-limit v-model="applyParam.projectname"></el-input>
                </td>
            </tr>
            <tr>
                <td>
                    负责人
                </td>
                <td>
                    <el-input clearable prefix-icon="el-icon-user-solid" :disabled="true" v-model="applyParam.name"></el-input>
                </td>
                <td>
                    QQ账号
                </td>
                <td>
                    <el-input clearable prefix-icon="el-icon-help" v-model="applyParam.code"></el-input>
                </td>
            </tr>
            <tr>
                <td>
                    团队人数
                </td>
                <td>
                    <el-input placeholder="单位:(/人)" clearable prefix-icon="el-icon-s-data" oninput ="value=value.replace(/[^\d]/g,'')" v-model="applyParam.number"></el-input>
                </td>
                <td>
                    项目周期
                </td>
                <td>
                    <el-input placeholder="单位:(/天)" clearable prefix-icon="el-icon-s-data" oninput ="value=value.replace(/[^\d]/g,'')" v-model="applyParam.duration"></el-input>
                </td>
            </tr>
            <tr>
                <td>
                    指导老师
                </td>
                <td>
                    <el-autocomplete
                        style="width:100%"
                        v-model="state"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="支持模糊查询"
                        @select="handleSelect"
                    >
                    </el-autocomplete>
                </td>
                <td>
                    预计经费
                </td>
                <td>
                    <el-input placeholder="单位:(/元)" clearable prefix-icon="el-icon-bank-card" oninput ="value=value.replace(/[^\d]/g,'')" v-model="applyParam.cost"></el-input>
                </td>
            </tr>
            <tr>
                <td>
                    项目简介
                </td>
                <td>
                    <input class="apply-box-file" type="file" id="projectIntroduce"/>
                </td>
                <td>
                    团队简介
                </td>
                <td>
                    <input class="apply-box-file" type="file" id="teamIntroduce"/>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <button class="apply-box-submit" @click="submieApply">提交申请</button>
                </td>
            </tr>
        </table>
    </div>
    <div class="notice-box" style="height: auto;width: auto;left: auto;right: 5px;">
        <h3>温馨提示</h3>
        <p style="word-break: break-word;">
            1.建议团队人数不超过5人,且团队成员原则上要求来自同一专业	
        </p>
        <p style="word-break: break-word;">
            2.建议项目题目立意要新颖,要具有创新性	
        </p>
        <p style="word-break: break-word;">
            3.项目应遵守国家法律规定，申请项目前请仔细查询相关法律条文<a href="http://www.gov.cn/gongbao/content/2002/content_61873.htm" target="_blank">《中华人民共和国科学技术部令》</a>
        </p>
        <p style="word-break: break-word;">
            4.建议项目申请前咨询老师意见,在老师指导下进行相关内容修订	
        </p>
        <p style="word-break: break-word;">
            5.建议项目立足于实际,将有限的人力物力应用到对社会有意义的领域	
        </p>
        <p style="word-break: break-word;">
            6.相关上传文件仅支持[Microsoft Excel 97-2003 工作表 (.xls)]格式
        </p>
        <p>
            附件一:
            <el-link icon="el-icon-download" type="priamry" @click="downloadTemplate('projectIntroduce')">
                项目简介模板
            </el-link><br>
            附件二:
            <el-link icon="el-icon-download" type="priamry" @click="downloadTemplate('teamIntroduce')">
                团队简介模板
            </el-link>
        </p>
    </div>
  </div>
</template>

<script>

import AES from '@/util/crypto';
import $ from 'jquery';
import {v4 as uuidv4} from 'uuid';
import { mapState } from 'vuex';
import axios from 'axios';
import debounce from 'lodash/debounce';
export default {
    name:'ApplyManage',
    data(){
        return{
            creep:false,
            Loading:true,
            deadline: Date.now() +1000 * 60 * 15 ,
            restaurants:[],
            state: '',
            timeout:  null,
            applyParam:{
                projectname:'',
                name:JSON.parse(AES.decrypt(sessionStorage.getItem("userObj"))).account,
                code:'',
                number:null,
                duration:null,
                teacherid:'',
                cost:null
            },
            fileName:''
        }
    },
    methods:{
        hilarity(){
            this.applyParam.projectname='';
            this.applyParam.code='';
            this.applyParam.number=null;
            this.applyParam.duration=null;
            this.teacherid='',
            this.cost=null
        },
        //对项目提交事件做防抖处理，多次连续点击仅最后一次生效
        submieApply:debounce(function(){
            var projectIntroduceName=$("#projectIntroduce").val();
            var teamIntroduceName=$("#teamIntroduce").val();
            var suffix=projectIntroduceName.substr(projectIntroduceName.lastIndexOf(".")+1).toLocaleLowerCase();//xls,XLS,Xls,xLs,....
            var suffix1=teamIntroduceName.substr(teamIntroduceName.lastIndexOf(".")+1).toLocaleLowerCase();
            if(suffix!="xls"||suffix1!="xls"){
                this.$notify({
                    title: '警告',
                    message:'仅支持xls文件',
                    type: 'warning'
                });
                return;
            }
            var project=document.getElementById("projectIntroduce").files;
            var team=document.getElementById("teamIntroduce").files;
            if(project[0].size>5*1024*1024||team[0].size>5*1024*1024){
                this.$notify({
                    title: '警告',
                    message: '文件大小不超过5MB',
                    type: 'warning'
                });
                return;
            }
            if(this.applyParam.cost>3000){
                this.$notify({
                    title: '警告',
                    message: '抱歉!项目经费最高可申请3000元',
                    type: 'warning'
                });
                return;
            }
            if(this.applyParam.projectname===''||this.applyParam.code===''||
            this.applyParam.duration===null||this.applyParam.number===null||
            this.applyParam.cost===null||this.applyParam.teacherid===''){
                this.$notify({
                    title: '警告',
                    message: '请检查输入是否存在空缺',
                    type: 'warning'
                });
                return;
            }
            const formParam=new FormData();
            formParam.append("proIntroduce",project[0]);
            formParam.append("teamIntroduce",team[0]);
            let obj=JSON.stringify(Object.assign(this.applyParam,{'id':uuidv4().slice(0,-4)}))
            formParam.append("applyInformation",obj);
            this.$store.dispatch("projectApply/createProjectApply",formParam)
        }),
        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
            cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
      },
      handleSelect(item) {
        // 点击下拉表进行处理
        this.applyParam.teacherid=item.id
      },
      downloadTemplate(type){
        switch(type){
            case 'projectIntroduce':
                this.fileName='项目简介';
                break;
            case 'teamIntroduce':
                this.fileName='团队简介';
                break;
        }
        const config = {
                method: 'get',
                url: 'serviceCustomer/api/project/downloadFileTemplate',
                params:{
                    'fileType':type
                },
                headers: {
                    'ContentType' : 'application/json'
                },
                responseType: 'blob'
            };
            axios(config).then(response => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', this.fileName+'.xls');
                document.body.appendChild(link);
                link.click();
            })
      }
    },
    computed:{
        ...mapState('projectApply',['teacherList'])
    },
    mounted(){
        this.$store.dispatch("projectApply/getTeacherList")
    },
    watch:{
        'teacherList':{
            immediate:true,
            handler(newValue,oldValue){
                this.restaurants=newValue;
            }
        }
    }
}
</script>

<style scoped lang="css">
    .applyManage-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .apply-box{
        position:inherit;
        left: 0;
        width: 70%;
        height:90%;
    }
    .apply-box-table{
        position: inherit;
        height: 100%;
        width: 100%;
        table-layout: fixed; 
        text-align: center;
        white-space: nowrap;
        font-size: auto;
        border-spacing: 60px;
        border-collapse: separate
    }
    .apply-box-file{
        border: none !important;;
        border-radius: 0 !important;
        height: 40px !important;
    }
    /* .apply-box input{
        border-radius: 10px;
        width: 250px;
        height: 30px;       
    } */
    .apply-box-submit{
        background-color: rgba(0,0,0,0);
        border-radius: 10px;
        width: 20%;
        height: 5%;
    }
    .notice-box{
        padding: 10px;
        position: inherit;
        margin-left:80% ;
        top:10%;
        width:15%;
        height: 85%;
        background-color: #CCCCCC;
        border-radius: 10px;
    }
    button:hover{
        opacity: 0.5;
        color: #3278B3;
    }
    p {
        font-size: clamp(5px, 2vw, 10px);
    }
</style>